<template>
  <div class="comment_container">
      <h3>发表评论</h3>
      <hr>
      <textarea placeholder="请输入评论内容，最多120字" maxlength="120" v-model="msg"></textarea>
      <mt-button size="large"  type="primary" @click="postcomment">发表评论</mt-button>
      <div class="cmt_list">
        <div class="cmt_item" v-for="(item, index) in commets" :key="index">
          <div class="cmt_title">
            第{{index + 1}}楼 &nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time}}
          </div>
          <div class="cmt_body">
           {{item.content === 'undefined' ? '你妈死了' : item.content}}
          </div>
        </div>
      </div>
      <mt-button size="large"  type="danger" plain @click="getMore">加载更多</mt-button>
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      pageIndex: 1,
      commets: [],
      msg: ''
    }
  },
  created () {
    this.getcomment()
  },
  methods: {
    // 获取评论
    getcomment () {
      this.$http.get('api/getcomments/' + this.id + '?pageindex=' + this.pageIndex).then(result => {
        if (result.body.status === 0) {
          this.commets = this.commets.concat(result.body.message)
        } else {
          console.log('获取评论失败')
        }
      })
    },
    getMore () {
      this.pageIndex++
      this.getcomment()
    },
    postcomment () {
      // eslint-disable-next-line no-undef
      if (this.msg.trim().length === 0) {
        return Toast('请输入内容')
      }
      this.$http.post('api/postcomment/' + this.$route.params.id, {
        content: this.msg.trim()
      }).then(function (result) {
        if (result.body.status === 0) {
          var cmt = {
            user_name: '匿名用户',
            add_time: Date.now(),
            content: this.msg.trim()
          }
          this.commets.unshift(cmt)
          this.msg = ''
        }
      })
    }
  },
  props: ['id']
}
</script>
<style lang="css" scoped>
.comment_container{
  margin-bottom: 60px;
}
.comment_container h3{
  font-size: 18px;
}
.comment_container hr{
  margin: 5px 0;
}
.comment_container textarea{
  font-size: 14px;
  height: 85px;
  margin: 0;
}
.comment_container .cmt_list{
  margin: 5px 0;
}
.comment_container .cmt_list .cmt_item{
  font-size: 13px;
}
.comment_container .cmt_list .cmt_item .cmt_title{
  line-height: 30px;
  background-color: #ccc;
}
.comment_container .cmt_list .cmt_item .cmt_body{
  text-indent: 2em;
  line-height: 35px;
}
</style>
